<template>
	<div class="right-cps-view">
		<div class="tbs-view">
			<el-button v-for="(item, index) in tabs" :key="index" @click="activeBtn = index"
				:type="activeBtn == index ? 'primary' : ''" style="border-radius: 0;font-size: 14px;"
				:disabled="(tableItemData == 'no Data' && index != 0) && mChgDate == '' ? true : false">
				{{ item.title }}
			</el-button>
			<!-- -右侧框-{{ rightViewFlag }}-是否修改-{{ DataChange }} -->
		</div>
		<!-- content -->
		<div class="container">
			<tabs-detail ref="view_one" :tableItemData="tableItemData" v-show="activeBtn == 0 || activeBtn == 1"
				@changeBtnClickFlg="changeBtnClickFlg" @selectChgDateChange="selectChgDateChange" :activeBtn="activeBtn"
				@DataChangeFn="DataChangeFn" :rightViewFlag="rightViewFlag"
				@isConfirmingFn="isConfirmingFn"></tabs-detail>
			<tabs-plan ref="view_two" v-show="activeBtn == 2" :chgDate="mChgDate" :tableItemData="tableItemData"
				@DataChangeFn="DataChangeFn" :rightViewFlag="rightViewFlag"
				@isConfirmingFn="isConfirmingFn"></tabs-plan>
		</div>

		<!-- footer -->
		<footer class="footer-view">
			<!-- <button v-show="isBtnShow">Cancel</button>  -->
			<el-button v-show="$hasEditPermission('/BHView')" :disabled="mChgDate == '' || BtnClickFlg"
				:type="mChgDate == '' || BtnClickFlg ? '' : 'primary'" @click="saveFn(true)">編集内容を保存</el-button>
			<el-button @click="onCloseClick" :disabled="!macNamebValue" type="warning">
				{{ $t("message.public.close") }}
			</el-button>
		</footer>
	</div>
</template>

<script>
import tabs_detail from "./tabs/Tab_1.vue";
import tabs_plan from "./tabs/Tab_2.vue";
import { getLocalStorage } from "@/utils/storage";
import eventBus from "@/eventBus/bus";
import _ from 'lodash-es';
export default {
	name: "TabsCompontens",
	props: ["tableItemData", "rightViewFlag"],
	data() {
		return {
			userData: getLocalStorage('userData'),
			tabs: [{ title: "肉厚仕様" }, { title: "肉厚仕様2" }, { title: "方位" }],
			activeBtn: 0,

			mChgDate: "",
			BtnClickFlg: false,

			//  数据是否修改过
			DataChange: false,
			// 用于记录上一次事件触发的时间戳  
			lastTriggeredAt: null,
			isConfirming: false,
		};
	},
	components: {
		"tabs-detail": tabs_detail,
		"tabs-plan": tabs_plan,
	},
	watch: {
		tableItemData(nVal) {
			// this.activeBtn = 0;

			console.log(nVal);
		},
		activeBtn(nVal) {
			if(nVal == 2){
				this.$refs.view_two.resizeHeightFn()
			}
		},
		macNamebValue: {
			deep: true,
			handler: function (newV, oldV) {
				// 机器切换初始是保存编辑状态
				if (!newV) {
					this.activeBtn = 0;
				}
			},
		},

	},
	computed: {
		macNamebValue() {
			return this.$store.state.macNameb;
		},
	},
	methods: {
		isConfirmingFn(e) {
			this.isConfirming = e;
		},
		DataChangeFn(e) {
			this.DataChange = e;
		},

		changeBtnClickFlg(e) {
			this.BtnClickFlg = e;
		},
		saveFn(isSaveBtn) {
			// if (this.isConfirming) {
			// 	return
			// }
			this.isConfirming = true;
			// if (this.activeBtn == 0) {
			// console.log(this.$refs.view_one.chgDateSelectKey);
			this.$refs.view_one.initFn(isSaveBtn);
			// setTimeout(() => {
			// 	this.isConfirming = false;
			// }, 3000);
			// }
			// if (this.activeBtn == 1) {
			// 	this.$refs.view_two.initFn();
			// }
		},
		//
		onCloseClick() {
			this.$emit("onCloseClick", false);
		},

		selectChgDateChange(e) {
			this.mChgDate = e;
		},
	},



	created() { },
	mounted() {
		console.log("tableItemData");
		console.log(this.tableItemData);
		eventBus.$on("showPlan", (e) => {
			this.activeBtn = e;
		})


		//  监听通知，是否有数据变更
		eventBus.$on('getBasicStyleCompontensCurrent_EventBus', () => {
			console.log('getBasicStyleCompontensCurrent_EventBus', 111);

			//	获取当前数据是否更改。
			//	右侧弹框未-不出-保存
			if (!this.rightViewFlag) {
				this.DataChange = false;
			}
			//	追加状态，定出保存
			if (this.$store.state.TH_INfo_view2Info.initType == 1 || this.$store.state.TH_INfo_view1Info.initType == 1) {
				this.DataChange = true;
			}

			this.$store.commit("changeIsCurrentNext", !this.DataChange);
		});

		//  接受通知唤起保存弹框
		eventBus.$on('EventBusBasicStyleCompontensSaveFn', () => {
			if(!this.$store.state.isCurrentFn){
				return
			}
			this.saveFn();
		});
	},
	beforeDestroy() {
		eventBus.$off('getBasicStyleCompontensCurrent_EventBus');
		eventBus.$off('EventBusBasicStyleCompontensSaveFn');
		eventBus.$off('showPlan');
	},
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.right-cps-view {
	width: 100%;
	height: calc(100% - 2px);
	padding: 16px 0;
	border: 1px solid #c3c3c3;
	position: relative;
}

.tbs-view {
	width: 100%;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 16px;

	.el-button+.el-button {
		margin-left: 0px;
		width: 50%;
		// border-radius: 0 !important;
	}

	button {
		width: 50% !important;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		// border: 1px solid #d3d3d3;
		// border-right: 0 none;
		cursor: pointer;
	}

	button:last-child {
		// border-right: 1px solid #d3d3d3;
	}

	.active-btn-style {
		// background: #106ebe;
		// color: #fff;
	}

	.other-btn {
		// background-color: #FFF;
		// border-radius: 0 !important;

	}
}

.container {
	width: 100%;
	height: calc(100% - 32px);
	overflow-y: scroll;
	padding: 12px 8px 32px 16px;
}

.footer-view {
	position: absolute;
	z-index: 10;
	bottom: 0;
	width: 100%;
	height: 47px;
	padding: 0 15px;
	border-top: 1px solid #d9d9d9;
	display: flex;
	align-items: center;
	background: #ffffff;

	button {
		min-width: 82px;
		height: 32px;
		line-height: 0;
		// background: #ffffff;
		// border: 1px solid #d9d9d9;
		margin-right: 12px;
		border-radius: 4px;
	}

	button:nth-child(1) {
		// background: #106ebe;
		// color: #fff;
		padding: 0 15px;
	}

	button:nth-child(2) {
		position: absolute;
		// background: #eb7421;
		// color: #fff;
		right: 0px;
	}
}
</style>